import { FC, useEffect, useState } from 'react';
import { Form, Input, Button, Checkbox, Radio, Cascader } from 'antd';
import { DatePicker, Space } from 'antd';//时间选择器
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';//时间选择器
import { useNavigate } from 'react-router-dom'
import type { RadioChangeEvent } from 'antd';
import { depList, viseAdds } from './../../apis/visList'
import './../../static/css/visadd.css'
import { Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
const getBase64 = (img: RcFile, callback: (url: string) => void) => {
  const reader = new FileReader();
  
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
};

const VisAdd: FC<any> = (props: any): JSX.Element => {

  interface IDepartment {
    id: number,
    name: string,
    parent_id: number,
    user: string,
    user_mobile: number | null,
    openid: string | null,
    son?: Array<IDepartment>
  }
  const navigate = useNavigate()
  const [types, setType] = useState(1);
  const [departments, setDepartments] = useState<Array<IDepartment>>([])
  const [def, setdef] = useState(0)
  const [endtime, setendtime] = useState('')
  const [setimes, settime] = useState('')
  useEffect(() => {
    depList().then((res: any) => {
      console.log(res);
      if (res.code === '00000') {
        setDepartments(res.data)
      }
    })

  }, [])
  const onFinish = async (e: any) => {

    const res: any = await viseAdds(
      {
        type: 1,
        username: e.username,
        mobile: e.mobile,
        card: e.card,
        carnumber: e.carnumber,
        starttime: setimes,
        endtime: endtime,
        reason: e.reason,
        department:def,
        travelcode: "1",
        healthcode: "1",
        nucleicacid: "1",
        adduserid: 1,
        openid: "123123123132123",
      }
    )
    console.log(res);
    if(res.code=='00000'){
      navigate('/index/visitor')
    }

  }
  // 单选框
  const redonChange = (e: RadioChangeEvent) => {
    console.log(e);

    setType(e.target.value)
  }
  // 单选框
  //  级联
  const defonChange = (e: any) => {
    let aa = e[e.length - 1]
    setdef(aa)
    console.log(def);

  }
  // 级联
  //时间选择器
  const onChange = (
    value: DatePickerProps['value'] | RangePickerProps['value'],
    dateString: [string, string] | string,
  ) => {

    setendtime(dateString + '')
  };

  const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
    // console.log('onOk: ', value);
  };
  const onChanges = (
    value: DatePickerProps['value'] | RangePickerProps['value'],
    dateString: [string, string] | string,
  ) => {
    settime(dateString + '')
  };

  const onOks = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
    // console.log('onOk: ', value);
  };
  //时间选择器
  // 文件上传
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState<string>();

  const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
    console.log(1234, info);

    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj as RcFile, url => {
        console.log('456', url);
        setLoading(false);
        setImageUrl(url);
      });
    }
  };

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>点击上传行程码</div>
    </div>
  );

  const quxiao = () => {
    console.log(def);

  }

  // 文件上传
  return (
    <div className='add'>
      <Form
        name="basic"
        wrapperCol={{ span: 16 }}
        onFinish={onFinish}>
        <div className='left'>

          <Form.Item
            label="类型"
            name="type"
            rules={[{ required: true }]}>
            <Radio.Group onChange={redonChange} value={types}>
              <Radio value={1} >外来人员</Radio>
              <Radio value={2}>老师</Radio>
              <Radio value={3}>学生</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            label="访客名称"
            name="username"
            rules={[{ required: true }]}>
            <Input placeholder='请输入访客名称'></Input>
          </Form.Item>

          <Form.Item
            label="手机号"
            name="mobile"
            rules={[{ required: true }]}>
            <Input placeholder='请输入手机号'></Input>
          </Form.Item>

          <Form.Item
            label="openid"
            name="openid">
            <Input placeholder='请输入openid'></Input>
          </Form.Item>

          <Form.Item
            label="身份证号"
            name="card"
            rules={[{ required: true }]}>
            <Input placeholder='请输入身份证号'></Input>
          </Form.Item>

          <Form.Item
            label="车牌号"
            name="carnumber">
            <Input placeholder='请输入·车牌号'></Input>
          </Form.Item>

          <Form.Item
            label="理由"
            name="resaon"
            rules={[{ required: true }]}>
            <Input placeholder='请输入理由'></Input>
          </Form.Item>

          <Form.Item
            label="部门"
            name="department"
            rules={[{ required: true }]}>
            <Cascader options={departments} fieldNames={{ label: "name", value: "id", children: "son" }} onChange={defonChange} placeholder="请选择部门" />
          </Form.Item>

          <Form.Item
            label="进校时间"
            name="starttime"
            rules={[{ required: true }]}>
            <DatePicker showTime onChange={onChange} onOk={onOk} placeholder="进校时间" />
          </Form.Item>

          <Form.Item
            label="离校时间"
            name="endtime"
            rules={[{ required: true }]}>
            <DatePicker showTime onChange={onChanges} onOk={onOks} placeholder="离校时间" />
          </Form.Item>

          <Form.Item
            label="是否去过高风险地区"
            name="is_go_danger"
            rules={[{ required: true }]}>
            <Radio.Group onChange={redonChange} value={types}>
              <Radio value={1} >否</Radio>
              <Radio value={2}>是</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            label="是否接触过高风险地区"
            name="is_contact_danger"
            rules={[{ required: true }]}>
            <Radio.Group onChange={redonChange} value={types}>
              <Radio value={1} >否</Radio>
              <Radio value={2}>是</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            label="是否离京"
            name="is_leave"
            rules={[{ required: true }]}>
            <Radio.Group onChange={redonChange} value={types}>
              <Radio value={1} >否</Radio>
              <Radio value={2}>是</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            label="健康状态"
            name="is_health"
            rules={[{ required: true }]}>
            <Radio.Group onChange={redonChange} value={types}>
              <Radio value={1} >良好</Radio>
              <Radio value={2}>一般</Radio>
              <Radio value={3}>差</Radio>
            </Radio.Group>
          </Form.Item>
        </div>
        <div className='right'>
          <div className='rightone'>
            <Form.Item
              label="行程码"
              rules={[{ required: true }]}>
              <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="http://121.42.230.80/api/visit/upload"
                onChange={handleChange}
              >
                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
              </Upload>
            </Form.Item>

            <Form.Item
              label="疫苗"

              rules={[{ required: true }]}>
              <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="http://121.42.230.80/api/visit/upload"
                onChange={handleChange}
              >
                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
              </Upload>
            </Form.Item>
          </div>
          <div className='rightone'>
            <Form.Item
              label="健康码"

              rules={[{ required: true }]}>
              <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="http://121.42.230.80/api/visit/upload"
                onChange={handleChange}
              >
                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
              </Upload>
            </Form.Item>

            <Form.Item
              label="核酸"

              rules={[{ required: true }]}>
              <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="http://121.42.230.80/api/visit/upload"
                onChange={handleChange}
              >
                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
              </Upload>
            </Form.Item>
          </div>
          <div className='btn'>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button onClick={quxiao}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                搜索
              </Button>
            </Form.Item>
          </div>
        </div>
      </Form >
    </div >
  )
}
export default VisAdd;